<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Articles</title>

<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="../css/common.css">

<script src="../javascript/common.js"></script>

</head>
<body>
<!-- header log -->
<div class="header-logo border container">
<div class="row" align="right">
	<ul class="list-inline header-logo-ul">
		<li>welcome to my world</li>
		<li><a href="#">Login</a></li>
		<li><a href="#">regist</a></li>
		<li><a href="#">付乐天</a></li>
		<li>付乐天</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
	</ul>
</div>
<div class="row">
<div class="col-xs-6"><img src="../images/vip.png" /></div>
</div>
</div>
<!-- //header log -->

<!-- header -->
<div class="header-main-bg">
<div class="container border">
<div class="row">
<div class="col-xs-12">
    <ul class="header-menu nav navbar-nav navbar-left">
      <li><a href="#">Link&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
</div>
</div>
</div>
</div>
<!-- //header-menu -->

<!-- location -->
<div class="location container">您现在的位置:</div>
<!-- //location -->

<!-- selector -->
<div class="container">
<div class="selector">
<div class="row">
	<div class="col-xs-1"><b>商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家</b></div>
	<div class="col-xs-11">
		<ul class="list-inline">
		  <li>...</li>
		  <li>...</li>
		  <li>...</li>
		  <li>...</li>
		  <li>...</li>
		  <li>...</li>
		</ul>
	</div>
</div>
<div class="row">
	<div class="col-xs-1"><b>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</b></div>
	<div class="col-xs-11">
		<ul class="list-inline">
		  <li><a href="#">0-10元</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">10-15元</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">15-20元</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">20-25元</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">25元以上</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		</ul>
	</div>
</div>
<div class="row">
	<div class="col-xs-1"><b>折&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;扣</b></div>
	<div class="col-xs-11">
		<ul class="list-inline">
		  <li><a href="#">1/2折</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">3/4折</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">5/6折</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">7/8折</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		  <li><a href="#">9/10折</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		</ul>
	</div>
</div>
</div>
</div>
<!-- //selector -->

<!-- articles -->
<div class="container">
<div class="bar-sort">
	<div class="btn-sort btn-sort-active-default"><label>默认排序</label><span class="glyphicon glyphicon-align-center"></span></div>
	<div class="btn-sort"><label>销量降序</label><span class="glyphicon glyphicon-arrow-down"></span></div>
	<div class="btn-sort"><label>价格升序</label><span class="glyphicon glyphicon-arrow-up"></span></div>
	<div class="btn-sort"><label>折扣升序</label><span class="glyphicon glyphicon-arrow-up"></span></div>
</div>
<div class="row">
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>覆盖</h3>
        <p>5</p>
        <p><a href="#" class="btn btn-primary addToBuyCar" role="button">加入购物车</a> <a href="#" class="btn btn-default" role="button">购买</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-xs-3">
    <div class="thumbnail">
      <img src="../images/cell.jpg" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
</div>
<!-- //articles -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">您已将[<span class="articleName"></span>]加入购物车</h4>
      </div>
      <div class="modal-body">
        <dl class="dl-horizontal">
		  <dt>...</dt>
		  <dd>...</dd>
		</dl>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>